<template>
  <el-container>
    <el-header> 个人中心</el-header>
    <el-main>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card>
            <div class="user-profile">
              <img src="../images/tx.jpg" class="avatar" alt="" />
              <page-container title="更换头像">
    <el-upload
      ref="uploadRef"
      :auto-upload="false"
      class="avatar-uploader"
      :show-file-list="false"
      :on-change="onSelectFile">
      <img v-if="imgUrl" :src="imgUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    <br />

    <el-button
      @click="uploadRef.$el.querySelector('input').click()"
      type="primary"
      :icon="Plus"
      size="large"
      >选择图片</el-button>
    <el-button
      @click="onUpdateAvatar"
      type="success"
      :icon="Upload"
      size="large"
      >上传头像</el-button>
  </page-container>
              <h2>{{ userProfile.name }}</h2>
              <p>学号: {{ userProfile.studentId }}</p>
              <p>班级: {{ userProfile.class }}</p>
              <p>邮箱: {{ userProfile.email }}</p>
              
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-tabs type="border-card">
            <el-tab-pane label="个人信息">
              <h3>个人简介：本人诚实，热情，具有良好的人际关系，极富创造力与创新意识，
                具有较强的逻辑思维和组织协调能力,对事情认真， 负责，有很强的责任心和团队精神，
                为人自信，乐观，处事冷静，服从领导安排，吃苦耐劳等。</h3>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>


    <el-main>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card>
            <div class="user-profile">
              <img src="../images/kebiao.jpg" class="avatar" alt="" />
          
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-tabs type="border-card">
            <el-tab-pane label="课表信息">
              <h3>重庆电信职业学院2023-2024年第二学期课表</h3>
        
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>

    <div class="pw">
      <el-col :span="58">
          <el-tabs type="border-card">
            <el-tab-pane label="修改密码">
    <form @submit.prevent="submitForm">
      <div class="pw1">
        <label for="currentPassword">当前密码:</label>
        <input type="password" id="currentPassword" v-model="currentPassword" required>
      </div>
      <div>
        <label for="newPassword">新密码:</label>
        <input type="password" id="newPassword" v-model="newPassword" required>
      </div>
      <div>
        <label for="confirmPassword">请确认新密码:</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" required>
      </div>
      <div> 
        <button type="submit">提交</button>
      </div>
     
    </form>
        
            </el-tab-pane>
          </el-tabs>
        </el-col>
  </div>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';

const userProfile = ref({
  name: '小程',
  studentId: '202201014502',
  class: '大数据与软件技术3班',
  email: 'xiaocheng@example.com'
});


</script>

<script>
export default {
  data() {
    return {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  },
  methods: {
    submitForm() {
      if (this.newPassword !== this.confirmPassword) {
        alert('新密码和确认密码不匹配，请重新输入。');
        return;
      }
      alert('密码修改成功！');
    },
  }
};
</script>


<style scoped>
.el-header{
  text-align: center;
  font-size: 35px;
}
.user-profile {
  text-align: center;
}

.avatar {
  width: 300px;
  height: 250px;

}
</style>


  <style scoped>

    h4{
      text-align: center;
      font-size: 80px;
  
    }
    .user-info , .courses{
      margin-right: 50%;
    
    }
    .r{
      margin-left:90%;
    }
    .pw{
      width: 950px;
      height: 200px;
      font-size:large ;
      text-align: center;
      margin-left: 14%;
    }
   
  
   

  </style>


  
  

  

  